<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  	<title> - How The Snow - </title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/blueprint/screen.css" media="screen, projection" />
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/blueprint/print.css" media="print" />
  	<!--[if IE]><link rel="stylesheet" href="/stylesheets/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/base.css" />		
	<link type="text/css" href="stylesheets/css/cupertino/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="stylesheets/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="stylesheets/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script>
	$(function() {
		$( "#connexion" ).tabs();
		$( "#sub" ).button();
	});
	</script>
</head>

<body style="background: #eeeeee;">
  		<div class="container">
			<!-- HEADER -->
			<div class="span-24 last" style="background: #1E7FCB; text-align: center;">
	  			<div class="span-3"></div>
				<div class="span-12 last"><h1 style="font-size: 32pt; color: #FFFFFF; margin: 15px 15px 15px 15px;">How The Snow</h1></div>
				<div class="span-22 prepend-1 append-1 last">
					<div id="nav" class="ui-widget ui-widget-content ui-corner-all" style="margin:8px;">
						<ul>
							<li><a href="/">Accueil</a></li>
							<li><a href="/connexion">Connexion</a></li>
						</ul>
					</div>
				</div>
			</div>
	    	
		    <!-- CONTENT -->
		    <div class="span-22 prepend-1 append-1 last" style="background: #FEFEFE; height: 600px;">
		    	<div style="margin: 15px 15px 15px 15px; text-align: center;">
					
					<div class="span-10 last" id="connexion">
						<ul>
							<li><a href="#conn">Connexion</a></li>
						</ul>
						<div id="conn">
							<fieldset id="persfield" class="ui-widget ui-widget-content ui-corner-all">
								<form action="/connexion" method="post">
									<div class="span-8 last main">
										<div class="span-3">
									  		<label for="login">Pseudo</label>
									  	</div>
									  	<div class="span-5 last">
									  		<input type="text" id="login" name="login" maxlength="14" size="15" value=""/>
								   		</div>
									</div>
									<div class="span-8 last main">
										<div class="span-3">
									  		<label for="password">Mot de passe</label>
									  	</div>
									  	<div class="span-5 last">
									  		<input type="password" id="password" name="password" maxlength="14" size="15" value=""/>
								   		</div>
									</div>

									{% if message %}
									<div class="span-6 prepend-1 append-1 last ui-widget">
										<div class="ui-state-error ui-corner-all" style="margin: 20px; padding: 0 .7em;"> 
										    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>{{ message }}</p>
										</div>
									</div>
									{% endif %}
									<div class="span-8 last main">
										<button id="sub" class="submit" type="submit">Connexion</button>
									</div>
								</form>
							</fieldset>
						</div>				
				</div>
        	</div>
        </div>
        
         <!-- FOOTER -->
		<div class="span-24 last" style="background: #1E7FCB; text-align: center;">
			<label>- How The Snow - Copyright 2012 - S. BRUN & M. NEZRI - </label>
		</div>
    </div>
</body>

</html>

